<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单审核列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入 Vue.js -->
    <script src="/assets/vue/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <script src="/assets/element-plus/index.full.js"></script>
    <!-- 引入 Axios -->
    <script src="/assets/axios/axios.js"></script>
    <!-- 引入自定义安全模块 -->
    <script src="/assets/oa/security.js"></script>
    <style>
        /* 自定义样式 */
        .info .el-col,.info .el-select ,.info .el-input{
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题 -->
    <h2>订单审核列表</h2>
    <!-- 订单信息表格 -->
    <el-table
            ref="singleTable"
            :data="orderData"
            style="width: 100%">
        <!-- 序号列 -->
        <el-table-column type="index" width="50">
        </el-table-column>
        <!-- 订单ID列 -->
        <el-table-column property="orderid" label="订单ID" width="148">
        </el-table-column>
        <!-- 客户ID列 -->
        <el-table-column property="customerid" label="客户ID" width="145">
        </el-table-column>
        <!-- 管理员ID列 -->
        <el-table-column property="managerid" label="管理员ID" width="150">
        </el-table-column>
        <!-- 订单状态列 -->
        <el-table-column label="订单状态" width="112">
            <template #default="{ row }">
                <el-select v-model="row.orderstatus" @change="updateOrderStatus(row)">
                    <el-option label="待审核" value="待审核"></el-option>
                    <el-option label="活跃中" value="活跃中"></el-option>
                    <el-option label="已取消" value="已取消"></el-option>
                    <el-option label="已关闭" value="已关闭"></el-option>
                </el-select>
            </template>
        </el-table-column>
        <!-- 订单金额列 -->
        <el-table-column property="packagecost" label="订单金额" width="100">
            <template #default="{ row }">
                {{ row.packagecost }}元
            </template>
        </el-table-column>
        <!-- 订单包ID列 -->
        <el-table-column property="packageid" label="订单包ID" width="80">
        </el-table-column>
        <!-- 付款类型列 -->
        <el-table-column property="paymenttype" label="付款类型" width="80">
        </el-table-column>
        <!-- 创建时间列 -->
        <el-table-column property="createtime" label="创建时间" :formatter="formatTimestamp" width="165">
        </el-table-column>
        <!-- 更新时间列 -->
        <el-table-column property="updatetime" label="更新时间" :formatter="formatTimestamp" width="165">
        </el-table-column>
        <!-- 在表格中添加操作列 -->
        <el-table-column label="操作" width="170">
            <template #default="{ row }">
                <el-button type="primary" @click="editAdmin(row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    // 定义 Main 组件
    var Main = {
        data() {
            return {
                orderData: [] // 订单信息数据
            }
        },
        methods: {
            formatTimestamp(row, column) {
                const timestamp = row[column.property];
                if (!timestamp) return ''; // 如果时间戳不存在，则返回空字符串
                const date = new Date(timestamp);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
            // 更新订单状态的方法...
            ,updateOrderStatus(order) {
                console.info("updateOrderStatus 参数校验是否有值：")
                console.info(order.orderid)
                console.info(order.orderstatus)
                axios.post("/order/updateState", { orderid: order.orderid, status: order.orderstatus })
                    .then(response => {
                        // 更新表格数据
                        this.fetchOrderData();
                        console.log("订单状态更新成功");
                    })
                    .catch(error => {
                        console.error("订单状态更新失败：" + error);
                    });
            }
            // 获取订单数据的方法...
            ,fetchOrderData() {
                const managerid = sessionStorage.managerid;
                // 重新获取订单信息数据
                axios.post("/order/selectByManagerID", { managerid: managerid })
                    .then(response => {
                        console.info("重新获取订单数据成功，以下打印：")
                        console.info(response)
                        // 获取到的数据
                        const data = response.data.data;
                        // 将获取到的订单信息数据赋值给表格数据
                        this.orderData = data;
                        // 检查数据是否为单个对象
                        if (!Array.isArray(data)) {
                            // 数据是单个对象，将其转换为数组再赋值给表格数据
                            this.orderData = [data];
                        }
                    })
                    .catch(error => {
                        console.error("重新获取订单信息失败：" + error);
                    });
            }
            ,editAdmin(row) {
                // 获取管理员ID
                const orderid = row.orderid;
                console.info("进入了客户详情页面，等待跳转")
                console.info(orderid)
                // 构造编辑页面的URL，并跳转到该页面
                window.location.href = `/order_phone.html?orderid=${orderid}`;
            }

        },
        mounted() {
            // 页面加载完成时获取订单信息数据
            this.fetchOrderData();
        }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(Main);
    // 使用 Element Plus
    app.use(ElementPlus);
    // 挂载至 #app
    app.mount("#app");
</script>

</body>
</html>
